<template>
    <div class="checkup_box">
        <div style="width: 100%; height: 20px;">
            <el-button type="warning" size="small" link style="float: right; margin-left: 10px;" @click="reback()">
                返回
            </el-button>
        </div>
        <p style="margin-bottom: 10px; font-size: 14px;">体检编号：<span style="font-weight: 600;">{{ checkupForm.number }}</span></p>
        <el-upload class="upload-demo" drag :action="uploadAction" :headers="headers" multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将体检文件拖到此处，或<em>点击上传体检文件</em></div>
        </el-upload>
        <div v-for="(item, index) in checkupListData" :key="index">
            <div style="display: flex;justify-content: space-between; margin-bottom: 4px; align-items: center;">
                <p>{{ item.itemType }}</p>
                <el-button type="danger" @click="deleteReport(item.id)">删 除</el-button>
            </div>
            <iframe :src="htmlPdUrl[index]" frameborder="0" height="570px" width="100%" class="iframe"></iframe>
        </div>
    </div>
</template>

<script>
import seqSampleApi from '@/api/sequence/seqSample'
import axios from 'axios'
export default {
    name: '',
    props: ["dataCheckupId"],
    data() {
        return {
            checkupForm: {},
            headers: {},
            uploadAction: '',
            checkupListData: [],
            htmlPdUrl: [],
        }
    },
    created() {
        this.headers = {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        };
        // console.log(this.dataCheckupId);
        // 查看体检单
        seqSampleApi.get(this.dataCheckupId).then(res => {
            // this.detailCheckUpDialogVisible = true;
            this.checkupForm = res.data;
        })
        this.uploadAction = process.env.VUE_APP_FILE_API_PREV + '/service-platform/fmt-donor-checkup/upload-item/' + this.dataCheckupId;

        this.getReportList();
    },
    methods: {
        reback() {
            this.$emit("close");
        },
        // 获取体检项列表
        getReportList() {
            seqSampleApi.checkupList(this.dataCheckupId).then(res => {
                this.checkupListData = res.data;
                for (let i = 0; i < this.checkupListData.length; i++) {
                    axios({
                        url: this.checkupListData[i].imgUrl,
                        method: 'get',
                        responseType: 'blob'
                    }).then(r => {
                        const binaryData = [];
                        binaryData.push(r.data);
                        let b = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' })) + '#toolbar=0&navpanes=0&scrollbar=0';
                        this.$set(this.htmlPdUrl, i, b);
                    })
                }
            })
        },
        // 删除体检单
        deleteReport(id) {
            this.$confirm("此操作将删除该体检单，是否继续?", "提示", {
                confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
            }).then(() => {
                seqSampleApi.deleteCheckup(id).then(res => {
                    if (res.code == 200) {
                        if (res.data) {
                            this.$message({ message: '操作成功！', type: 'success' });
                            this.getReportList();
                        }
                    }
                })
            }).catch(() => {
                // this.$message({ type: 'info', message: '已取消删除' });
            });
        },
    },
    mounted() {

    }
}
</script>

<style scoped>
.checkup_box {
    /* padding: 10px; */
    background-color: white;
}
</style>

